<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8" />
  <title>小幽灵盯着我的鼠标怎么办</title>
  <style>
    html,
    body {
      background: #28254c;
      font-family: "Ubuntu";
    }

    * {
      box-sizing: border-box;
    }

    .box .box__ghost {
      padding: 15px 25px 25px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }

    .box .box__ghost .symbol:nth-child(1) {
      opacity: 0.2;
      animation: shine 4s ease-in-out 3s infinite;
    }

    .box .box__ghost .symbol:nth-child(1):before,
    .box .box__ghost .symbol:nth-child(1):after {
      content: "";
      width: 12px;
      height: 4px;
      background: #fff;
      position: absolute;
      border-radius: 5px;
      bottom: 65px;
      left: 0;
    }

    .box .box__ghost .symbol:nth-child(1):before {
      transform: rotate(45deg);
    }

    .box .box__ghost .symbol:nth-child(1):after {
      transform: rotate(-45deg);
    }

    .box .box__ghost .symbol:nth-child(2) {
      position: absolute;
      left: -5px;
      top: 30px;
      height: 18px;
      width: 18px;
      border: 4px solid;
      border-radius: 50%;
      border-color: #fff;
      opacity: 0.2;
      animation: shine 4s ease-in-out 1.3s infinite;
    }

    .box .box__ghost .symbol:nth-child(3) {
      opacity: 0.2;
      animation: shine 3s ease-in-out 0.5s infinite;
    }

    .box .box__ghost .symbol:nth-child(3):before,
    .box .box__ghost .symbol:nth-child(3):after {
      content: "";
      width: 12px;
      height: 4px;
      background: #fff;
      position: absolute;
      border-radius: 5px;
      top: 5px;
      left: 40px;
    }

    .box .box__ghost .symbol:nth-child(3):before {
      transform: rotate(90deg);
    }

    .box .box__ghost .symbol:nth-child(3):after {
      transform: rotate(180deg);
    }

    .box .box__ghost .symbol:nth-child(4) {
      opacity: 0.2;
      animation: shine 6s ease-in-out 1.6s infinite;
    }

    .box .box__ghost .symbol:nth-child(4):before,
    .box .box__ghost .symbol:nth-child(4):after {
      content: "";
      width: 15px;
      height: 4px;
      background: #fff;
      position: absolute;
      border-radius: 5px;
      top: 10px;
      right: 30px;
    }

    .box .box__ghost .symbol:nth-child(4):before {
      transform: rotate(45deg);
    }

    .box .box__ghost .symbol:nth-child(4):after {
      transform: rotate(-45deg);
    }

    .box .box__ghost .symbol:nth-child(5) {
      position: absolute;
      right: 5px;
      top: 40px;
      height: 12px;
      width: 12px;
      border: 3px solid;
      border-radius: 50%;
      border-color: #fff;
      opacity: 0.2;
      animation: shine 1.7s ease-in-out 7s infinite;
    }

    .box .box__ghost .symbol:nth-child(6) {
      opacity: 0.2;
      animation: shine 2s ease-in-out 6s infinite;
    }

    .box .box__ghost .symbol:nth-child(6):before,
    .box .box__ghost .symbol:nth-child(6):after {
      content: "";
      width: 15px;
      height: 4px;
      background: #fff;
      position: absolute;
      border-radius: 5px;
      bottom: 65px;
      right: -5px;
    }

    .box .box__ghost .symbol:nth-child(6):before {
      transform: rotate(90deg);
    }

    .box .box__ghost .symbol:nth-child(6):after {
      transform: rotate(180deg);
    }

    .box .box__ghost .box__ghost-container {
      background: #fff;
      width: 100px;
      height: 100px;
      border-radius: 100px 100px 0 0;
      position: relative;
      margin: 0 auto;
      animation: upndown 3s ease-in-out infinite;
    }

    .box .box__ghost .box__ghost-container .box__ghost-eyes {
      position: absolute;
      left: 50%;
      top: 45%;
      height: 12px;
      width: 70px;
    }

    .box .box__ghost .box__ghost-container .box__ghost-eyes .box__eye-left {
      width: 12px;
      height: 12px;
      background: #332f63;
      border-radius: 50%;
      margin: 0 10px;
      position: absolute;
      left: 0;
    }

    .box .box__ghost .box__ghost-container .box__ghost-eyes .box__eye-right {
      width: 12px;
      height: 12px;
      background: #332f63;
      border-radius: 50%;
      margin: 0 10px;
      position: absolute;
      right: 0;
    }

    .box .box__ghost .box__ghost-container .box__ghost-bottom {
      display: flex;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
    }

    .box .box__ghost .box__ghost-container .box__ghost-bottom div {
      flex-grow: 1;
      position: relative;
      top: -10px;
      height: 20px;
      border-radius: 100%;
      background-color: #fff;
    }

    .box .box__ghost .box__ghost-container .box__ghost-bottom div:nth-child(2n) {
      top: -12px;
      margin: 0 0px;
      border-top: 15px solid #332f63;
      background: transparent;
    }

    .box .box__ghost .box__ghost-shadow {
      height: 20px;
      box-shadow: 0 50px 15px 5px #3b3769;
      border-radius: 50%;
      margin: 0 auto;
      animation: smallnbig 3s ease-in-out infinite;
    }

    @keyframes upndown {
      0% {
        transform: translateY(5px);
      }

      50% {
        transform: translateY(15px);
      }

      100% {
        transform: translateY(5px);
      }
    }

    @keyframes smallnbig {
      0% {
        width: 90px;
      }

      50% {
        width: 100px;
      }

      100% {
        width: 90px;
      }
    }

    @keyframes shine {
      0% {
        opacity: 0.2;
      }

      25% {
        opacity: 0.1;
      }

      50% {
        opacity: 0.2;
      }

      100% {
        opacity: 0.2;
      }
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="box__ghost">
      <div class="symbol"></div>
      <div class="symbol"></div>
      <div class="symbol"></div>
      <div class="symbol"></div>
      <div class="symbol"></div>
      <div class="symbol"></div>
      <div class="box__ghost-container">
        <div class="box__ghost-eyes">
          <div class="box__eye-left"></div>
          <div class="box__eye-right"></div>
        </div>
        <div class="box__ghost-bottom">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <div class="box__ghost-shadow"></div>
    </div>
  </div>
  <script>
    var pageX = document.documentElement.scrollWidth;
    var pageY = document.documentElement.scrollHeight;
    var mouseY = 0;
    var mouseX = 0;
    document.addEventListener("mousemove", function (event) {
      mouseY = event.pageY;
      var yAxis = ((pageY / 2 - mouseY) / pageY) * 300;
      mouseX = event.pageX / -pageX;
      var xAxis = -mouseX * 100 - 100;
      var boxGhostEyes = document.querySelector(".box__ghost-eyes");
      boxGhostEyes.style.transform = `translate(${xAxis}%,${-yAxis}%)`;
    });
  </script>
</body>

</html>